<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta charset="utf-8"/>
    <title>米塔云平台管理系统</title>
    <link href="../plugins/bootstrap/bootstrap.min.css" rel="stylesheet"/>
    <link href="../plugins/font-awesome/css/all.min.css" rel="stylesheet"/>
    <link href="../customize/css/iconfont.css" rel="stylesheet">
    <link href="../customize/css/content.css" rel="stylesheet"/>
    <style>
        .alarm-count-sec {
            border-radius: 4px;
            box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.4);
            color: #FFFFFF;
            padding: 8px 6px;
            background-repeat: no-repeat;
            background-position: right bottom;
            background-origin: content-box;
        }

        .alarm-count-sec:nth-child(1) {
            background-image: url(../customize/images/icon/alarm-bg-icon1.png);
            background-color: #278597;
        }

        .alarm-count-sec:nth-child(2) {
            background-image: url(../customize/images/icon/alarm-bg-icon2.png);
            background-color: #2884B4;
        }

        .alarm-count-sec:nth-child(3) {
            background-image: url(../customize/images/icon/alarm-bg-icon3.png);
            background-color: #CD3923;
        }

        .alarm-count-sec:nth-child(4) {
            background-image: url(../customize/images/icon/alarm-bg-icon4.png);
            background-color: #D78210;
        }

        .alarm-count-sec .icon {
            height: 62px;
            width: 62px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.2);
            margin-right: 6%;
            margin-left: 8%;
            padding-top: 17px;
            text-align: center;
        }

        .alarm-count-sec .content {
            padding: 6px 0;
        }

        .badge {
            color: #FFFFFF;
        }

        .badge.level1 {
            background: #30C1F8;
        }

        .badge.level2 {
            background: #F2D40D;
            color: #333333;
        }

        .badge.level3 {
            background: #F83E30;
        }

        .badge.level4 {
            background: #F8A707;
        }
    </style>
</head>
<body>
<div class="m-3">
    <nav class="custom-section" aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><i class="iconfont icon-left-nav2"></i> 历史数据</li>
            <li class="breadcrumb-item active"><i class="iconfont icon-xiaolan22"></i> 历史告警</li>
        </ol>
    </nav>
    <div class="mt-3 d-flex">
        <div class="alarm-count-sec align-items-center d-flex flex-1">
            <div class="icon"><img src="../customize/images/icon/alarm-icon1.png" alt=""></div>
            <div class="content">
                <div class="font-p20">今日报警数量</div>
                <div class="font-p14 mt-n1"><span class="font-p36 mr-1" id="span-id1">0</span>条</div>
            </div>
        </div>
        <div class="alarm-count-sec align-items-center ml-3 d-flex flex-1">
            <div class="icon"><img src="../customize/images/icon/alarm-icon2.png" alt=""></div>
            <div class="content">
                <div class="font-p20">本周报警数量</div>
                <div class="font-p14 mt-n1"><span class="font-p36 mr-1" id="span-id2">0</span>条</div>
            </div>
        </div>
        <div class="alarm-count-sec align-items-center ml-3 d-flex flex-1">
            <div class="icon"><img src="../customize/images/icon/alarm-icon3.png" alt=""></div>
            <div class="content">
                <div class="font-p20">未处理警告</div>
                <div class="font-p14 mt-n1"><span class="font-p36 mr-1" id="span-id3">0</span>条</div>
            </div>
        </div>
        <div class="alarm-count-sec align-items-center ml-3 d-flex flex-1">
            <div class="icon"><img src="../customize/images/icon/alarm-icon4.png" alt=""></div>
            <div class="content">
                <div class="font-p20">未恢复告警</div>
                <div class="font-p14 mt-n1"><span class="font-p36 mr-1" id="span-id4">0</span>条</div>
            </div>
        </div>
    </div>
    <div class="mt-3 custom-section">
        <form class="form-row align-items-center" id="selectAlarm_form">
            <div class="col-auto">
                <strong class="font-p14">条件查询：</strong>
            </div>
            <div class="col-auto">
                <select class="form-control" name="eId" id="company-list" onchange="loadDeviceByEid(this.value)">
                    <option value="0">选择企业</option>
                </select>
            </div>
            <div class="col-auto">
                <select class="form-control" name="dId" id="device-list">
                    <option value="0">选择设备</option>
                </select>
            </div>
            <div class="col-auto">
                <input class="form-control time-picker" name="beginTime" id="searchTimeBegin" type="text"
                       placeholder="开始时间">
            </div>
            <div class="col-auto">
                <input class="form-control time-picker" name="endTime" id="searchTimeEnd" type="text"
                       placeholder="结束时间">
            </div>
            <div class="col-auto">
                <select class="form-control" name="status" id="status-id">
                    <option value="0">选择处理状态</option>
                    <option value="1">未处理</option>
                    <option value="2">未恢复</option>
                    <option value="3">已恢复</option>
                </select>
            </div>
            <div class="col-auto">
                <button class="btn btn-primary" type="button" onclick="loadAlarmInfo()"><i
                        class="iconfont icon-dituyechaxun"></i> 查询
                </button>
            </div>
        </form>
        <table class="table table-striped table-bordered table-center" id="alarmList">

        </table>
        <div id="page" class="page_div"></div>
    </div>
</div>
</body>
<script src="../plugins/jquery-3.4.1.min.js"></script>
<script src="../plugins/bootstrap/bootstrap.min.js"></script>
<script src="../plugins/alert.js"></script>
<script src="../plugins/paging.js"></script>
<script src="../plugins/laydate/laydate.js"></script>
<script src="../customize/js/common.js"></script>
<script src="../customize/js/CommonUtils.js"></script>
<script src="../customize/js/customModalV2.js"></script>
<script src="../customize/js/alarm.js"></script>
<script>
    $("#page").paging({
        pageNo: 1,
        totalPage: 3,
        totalSize: 10,
        callback: function (num) {
        }
    });
    laydate.render({
        elem: '#searchTimeBegin',
        type: 'datetime',
        min: -60,
        max: -0
    });
    laydate.render({
        elem: '#searchTimeEnd',
        type: 'datetime',
        min: -60,
    });
</script>
</html>